<template>
  <div class="box"> 
      <van-nav-bar
  
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
       <van-search v-model="value" class="input"  shape="round"
  background="orange" placeholder="搜索" />
       <div class="content">
           <div class="nav">可提供列表服务</div>
       </div>
      <div class="box1
      ">
           
      </div>

  <van-grid :column-num="5">
  <van-grid-item icon="location"  style='color:orange;' text="厘米级" dot />
  <van-grid-item icon="star"  style='color:green;' text="毫米级"  />
  <van-grid-item icon="location"  style='color:yellow;' text="分米级" badge="99+" />
  <van-grid-item icon="friends"  style='color:purple;' text="米级"  />
  <van-grid-item icon="gift"  style='color:blue;' text="文字"  />
</van-grid>
     <div class="box2">
              <div class="box4">
                    厘米级服务
              </div>
           
             <div class="box6">
                  <img src="./assets/logo.png" alt="">
                   
             </div>
             <div class="box7">
                  <h1>产品名称:北斗型号12v-08</h1>
                  <h1>产品大类:北斗解决方案</h1>
                  <h1>服务时效:2年起</h1>
             </div>
           
           
     </div>
     <!-- 这里如果显示多条数据的话 可以用循环-->
     <div class="box3">
            <div class="box5">毫米级服务</div>
             <div class="box8">
                  <img src="./assets/logo.png" alt="">
                   
             </div>
              
             <div class="box9">
                  <h1>产品名称:北斗型号11v-03</h1>
                  <h1>产品大类:北斗解决方案</h1>
                  <h1>服务时效:1年起</h1>
             </div>
     </div>

     <!--active-color 选中的颜色   未选中的颜色 inactive-color  这是固定在底部的-->
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" >  
<van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item icon="bookmark-o">产品服务</van-tabbar-item>
<van-tabbar-item icon="bag-o">需求管理</van-tabbar-item>
<van-tabbar-item icon="contact">个人中心</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data(){
         return {
             value:''
         }
    },
     methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
}
</script>

<style scoped>
    .input {
          height: 1rem;
    }
      
    .box1{
         width: 6.25rem;
         height: 3rem;
         background-color: red;
         margin: 0 auto;  
         
         }
         .box2{
              background-color: rosybrown;
              height: 1.5rem;
              padding: 0.3rem;
             

         }
         .box3 {
             background-color: silver;
              height: 1.5rem;
              padding : 0.3rem;
              margin-bottom: 1.35rem;
         }
         .box4 {
              font-size: 0.2rem;
         }
         .box5  {
              font-size: 0.2rem;
         }
         .box6,.box7{
             float: left;
         }
          .box8,.box9{
             float: left;
         }
         .content {
              padding-left: 0.5rem;
              font-size: 0.15rem;
         }
         .nav {
              padding-left:0.05rem ;
              border-left: .13rem solid gray;
         }
         
</style>>
  
